<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <a-row :gutter="[0,16]">
      <!-- TODO 搜索 -->
      <a-col :span="24">
        <a-form layout="inline" :form="searchForm">

          <a-form-item label="任务名称">
            <a-input
                placeholder="请输入任务关键字"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                show-search
                placeholder="请选择任务状态"
                style="width: 180px"
            >
              <a-select-option value="0">
                已取消
              </a-select-option>
              <a-select-option value="1">
                待接单
              </a-select-option>
              <a-select-option value="2">
                已接单
              </a-select-option>
              <a-select-option value="3">
                已完成
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-button type="primary">
              <a-icon type="search"/>
              搜索
            </a-button>
          </a-form-item>

        </a-form>
      </a-col>

    </a-row>

    <a-row :gutter="[0,16]">
      <!-- 分页列表区 -->
      <a-col :span="24">
        <a-table
            :rowKey="rowKey"
            :columns="columns"
            :data-source="data"
            :defaultExpandAllRows="true"
            :pagination="pagination"
            bordered
        >

          <!-- 在职状态 -->
          <span slot="userStatus" slot-scope="status, item">
            <a-popconfirm
                placement="topLeft"
                ok-text="确认"
                cancel-text="取消"
                @confirm="onChangeStatus(item, status)"
            >
              <template slot="title"> 确定要修改吗? </template>
              <a-switch
                  checked-children="正常"
                  un-checked-children="停用"
                  :checked="status === 1"
                  size="large"
              />
            </a-popconfirm>
          </span>
        </a-table>

      </a-col>

    </a-row>

  </div>
</template>

<script>
import {getUsers,changeUserStatus} from '@/services/userManager'
import {mapState} from 'vuex'

export default {
  name: 'User',
  data() {
    return {
      columns: [
        {
          title: '用户ID',
          dataIndex: 'userId',
        },
        {
          title: '昵称',
          dataIndex: 'nikeName',
        },
        {
          title: '百度昵称',
          dataIndex: 'baiduNikeName',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          customRender: (val) => {
            if (val === 1) {
              return "男";
            } else if (val === 0) {
              return "女";
            } else {
              return "";
            }
          }
        },
        {
          title: '手机号',
          dataIndex: 'phone',
        },
        {
          title: '学校',
          dataIndex: 'school',
        },
        {
          title: '上次登录时间',
          dataIndex: 'lastLoginTime'
        },
        {
          title: '帐号状态',
          dataIndex: 'userStatus',
          scopedSlots: {customRender: "userStatus"}
        },

        /*{
          title: '操作',
          dataIndex: 'operator',
          scopedSlots: {customRender: 'operator'}
        },*/

      ],
      data: [],
      rowKey: '',
      searchForm: {},
      pagination: {
        current: 1,
        pageSize: 15,
        pageSizeOptions: ["15", "20", "30"],
        showTotal: (total) => {
          return " 共 " + total + " 条";
        },
        total: 0,
      }
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    // 获取用户数据
    getUsers() {
      getUsers().then((res) => {
        console.log(res.data)
        this.data = res.data.data.list
        this.pagination.total = res.data.data.total
        this.pagination.current = res.data.data.pageNum

      })
    },
    /**
     * 改变表格中帐号状态
     */
    onChangeStatus(item, status) {
      console.log("确认修改", status);
      let afterCode = this.changeStatusValue(status);
      // 请求进行更改帐号的状态
      changeUserStatus(item.userId,afterCode).then((res)=>{
        console.log(res.data)
        if (res.data.code === '1000'){
          // 成功则修改本地状态
          item.userStatus = afterCode
          this.$message.success("修改成功")
        }else {
          this.$message.error("修改失败")
        }
      })
    },
    changeStatusValue(status) {
      if (status == 1) {
        return 0;
      } else if (status == 0) {
        return 1;
      }
    }
  }
}
</script>
